@extends('home.parent')
@section('title','轮播图管理')
@section('head_js')
@endsection
@section('head_css')
<link rel="stylesheet" href="{{ asset('/css/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('/css/toggleButtonsMain.css') }}">
@endsection
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            轮播图管理
			<small></small>
        </h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{URL('admin')}}">
                    <i class="fa fa-dashboard"></i>首页
                </a>
            </li>s
            <li class="active">轮播图管理</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <button class="btn btn-info" onclick="ceshi_qiniu()">上传轮播图</button>
                        <div class="form-inline pull-right">

                        </div>
                    </div>
                    <!--/.box-header-->
                    <div class="box-body">
                        <table id="data_list" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>图片链接</th>
                                    <th>描述</th>
                                    <th>跳转链接</th>
                                    <th>创建时间</th>
                                    <th>状态</th>
                                    <th width="20%">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>图片链接</th>
                                    <th>描述</th>
                                    <th>跳转链接</th>
                                    <th>创建时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<style>
    .qiniuUploadForm img {
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .qiniuUploadForm input[type="file"] {
        display: none;
    }

    .qiniuUploadForm span#uploadVideo {
        display: block;
        height: 100px;
        width: 170px;
        text-align: center;
        border: 1px solid #717171;
        border-radius: 10px;
        cursor: pointer;
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-wrap !important;
    }

    #modal-info div.form-group input[type="text"] {
        display: inline;
        width: 400px;
        margin-left: 20px;
    }

    #modal-info div.upDiv {
        padding: 15px 0;
    }

    #modal-info div.upDiv label {
        font-weight: bold;
    }

    #modal-info div.upDiv label span {
        margin-left: 15px;
        color: red;
    }

    #modal-info div.upDiv img {
        margin-left: 82px;
        margin-top: 20px;
    }

    .video_list button {
        border-radius: 5px;
    }
</style>
<!-- 轮播图上传上传 -->
<div class="modal fade" id="modal-info">
    <div class="modal-dialog">
        <div class="modal-content  col-md-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="text-align: center">上传首页信息</h4>
            </div>
            <div class="form-group col-md-12 ">
                <label for="city" style="margin: 0;">注意事项：<span
                            style="color: red">*如果添加了跳转链接的话最好在描述内容里面添加链接描述</span></label>
            </div>
            <div class="form-group col-md-12">
                <label for="title" style="padding-top:5px;">描述内容<span style="color: red;">*</span></label>
                <input type="text" class="form-control" autocomplete="off" id="title" name="title"
                       placeholder="请填写相关信息" required>
            </div>
            <div class="form-group col-md-12 ">
                <label for="city" style="margin: 0;">跳转链接：<span
                            style="color: red">添加您需要的跳转链接(带http的链接)</span></label>
            </div>
            <div class="form-group col-md-12 ">
                <label for="talk">链接<span style="color: red;">*</span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" class="form-control" id="talk" name="talk" placeholder="添加链接地址">
            </div>
            <div class="modal-body upDiv">
                <form class="qiniuUploadForm" method="post" enctype="multipart/form-data">
                    <div class="form-group col-md-6">
                        <label for="city">轮播图：<span>图片大小不能超过5M，只支持png、jpg</span></label>
                        <img src="http://yksimg.weilaiyinsu.com/data/realname/img/sc.png" id="uploadImg">
                        <span><input type="file" name="optImg" id="optImg" onchange="optImgChange(this)"></span>
                    </div>

                </form>
                <input type="hidden" name="open_id" id="open_id">
                <input type="hidden" name="status" id="status" value="2">
            </div>
            <div class="modal-body col-md-12 look">
            </div>
            <div class="modal-footer col-md-12">
                <button type="button" class="btn btn-default " data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="qiniuUpload(this)">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div id="show" style="position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:9998;display:none;">
    <div style="background-color:#000; opacity:0.5; filter:alpha(opacity=50);top:0;left:0;right:0;bottom:0;width:100%;height:100%;"></div>
    <span style="z-index:9999;background-color:#fff;padding:20px;left:45%;top:40%;position:absolute;"><img src="/images/loading.gif"> 视频上传中.....请耐心等待</span>
</div>
@endsection
@section('foot_js')
<script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('/js/fastclick.js') }}"></script>
<script src="{{ asset('/js/tools.js') }}"></script>
<script>
var list_ajax;
$(function() {
    var lang = puppet.langShow();
    list_ajax = $("#data_list").dataTable({
        language: lang,
        autoWidth: false,
        stripeClasses: ["odd", "even"],
        processing: true,
        serverSide: true,
        searching: false,
        orderMulti: false,
        order: [[0, 'desc']],
        renderer: "bootstrap",
        pagingType: "simple_numbers",
        aLengthMenu: [5,10, 20, 50, 100],
        iDisplayLength: 5,
        columnDefs: [{
            "targets": [1, 2, 3, 4,5],
            "orderable": false
        },
        ],
        ajax: function(data, callback, settings) {
            var param = {};
            param.limit = data.length;
            param.start = data.start;
            param.page = (data.start / data.length) + 1;
            param.order = data.order;
            param.search_user = $.trim($("#name").val());
            param.search_mobile = $.trim($("#mobile").val());
            param.search_type = $.trim($("#type").val());
            $.ajax({
                type: "POST",
                url: "{{ URL('admin/partner/consulting/photo/ajax') }}",
                cache: false,
                data: param,
                dataType: "json",
                success: function(result) {
                    var returnData = {};
                    returnData.draw = data.draw;
                    returnData.recordsTotal = result.total;
                    returnData.recordsFiltered = result.total;
                    returnData.data = result.data;
                    callback(returnData)
                }
            })
        },
        columns: [
			{"data": "url"},
			{"data": "content"},
            {"data": "herf_url"},
			{"data": "create_time"},
            {"data": "status"},

			{"data": "operation"},
        ],
    }).api()
});
function searchData() {
    $("#data_list").dataTable().fnDraw(false);
    layer.msg("操作成功",{icon:6});
}
//审核操作提交
function saveVoid(kid,status){

        layer.confirm('是否确认操作', {
            btn: ['确定', '再考虑一下'] //按钮
        }, function () {
			layer.closeAll();
            shenhe(kid, status);
        });

}

function shenhe(kid,status) {
    loading_show();
    $.ajax({
        type:'POST',
        url:"{{URL('admin/partner/consulting/photo/change')}}",
        data:{kid:kid,status:status},
        dataType:'json',
        async:true,
        success:function(r){
            loading_hidden();
            if(r.code==1){
                layer.msg(r.msg,{icon:5,time:1000});
            }else{
                layer.msg(r.msg,{icon:6});
                searchData();
            }
        },
        error:function(){
            loading_hidden();
            layer.msg("网络错误",{icon:5});
        }
    });
}
//七牛云测试
function ceshi_qiniu() {
    // alert(111);
    $('#modal-info').modal();
    $('.modal-header h4').html("<font style='font-size: 24px;font-weight: bold;' >上传信息</font>");
    $('#status').val(status);
}

//触发图片上传控件
$('#uploadImg').click(function () {
    $('#optImg').val('').click();
    $('#uploadImg').attr('src', 'http://yksimg.weilaiyinsu.com/data/realname/img/sc.png');
    $('.look a.img').remove();
});

//上传控件值发生改变替换图片
function optImgChange(obj) {
    var imgSrc = puppet.getObjectURL(obj);
    // console.log(getObjectURL(this.files[0]));
    if ($(obj)[0].files[0]['type'] != 'image/pjpeg' && $(obj)[0].files[0]['type'] != 'image/jpeg' && $(obj)[0].files[0]['type'] != 'image/png' && $(obj)[0].files[0]['type'] != 'image/x-png') {
        layer.msg('图片格式错误', {icon: 0});
        $('#optImg').val('');
    } else if ($(obj)[0].files[0]['size'] > 5242880) {
        layer.msg('图片不能大于5M', {icon: 0});
        $('#optImg').val('');
    } else {
        $('#uploadImg').attr('src', imgSrc);
    }
}


//上传到七牛云方法
function qiniuUpload(obj) {
    var title = $.trim($("#title").val());
    var talk = $.trim($("#talk").val());
    var optImg = $.trim($("#optImg").val());
    var optVideo = $.trim($("#optVideo").val());
    if (title == '') {
        layer.msg('请填写轮播图描述内容', {icon: 0});
        return false;
    }

    if (optImg == '') {
        layer.msg('请上传轮播图', {icon: 0});
        return false;
    } else if ($('#optImg')[0].files[0]['type'] != 'image/pjpeg' && $('#optImg')[0].files[0]['type'] != 'image/jpeg' && $('#optImg')[0].files[0]['type'] != 'image/png' && $('#optImg')[0].files[0]['type'] != 'image/x-png') {
        layer.msg('轮播图格式错误', {icon: 2});
        return false;
    } else if ($('#optImg')[0].files[0]['size'] > 5242880) {
        layer.msg('轮播图不能大于5M', {icon: 2});
        return false;
    }


    $(obj).prop('disabled', true).html('上传中');
    loading_show();
    var data = new FormData();
    data.append("content", $('#title').val());
    data.append("herfurl", $('#talk').val());
    data.append("fileImg", $('#optImg')[0].files[0]);
    $('.qiniuUploadForm').serialize();
    //console.log(data);
    $.ajax({
        url: "{{URL('admin/partner/consulting/photo/qnsc')}}",
        data: data,
        type: "Post",
        dataType: "json",
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success: function (result) {
            loading_hidden();
            if (result.code == 1) {
                layer.msg(result.msg, {icon: 2});
            } else {
                layer.msg(result.msg, {icon: 1});
                $('#modal-info').modal('hide');
            }
            $(obj).prop('disabled', false).html('提交');
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
            $(obj).prop('disabled', false).html('提交');
            loading_hidden();
            layer.msg("网络错误", {icon: 5});
        }, xhr: function (result) {
            var xhr = new XMLHttpRequest();
            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
            xhr.upload.addEventListener('progress', function (e) {
                console.log(e);
                //loaded代表上传了多少
                //total代表总数为多少
                // var progressRate = (e.loaded / e.total) * 100 + '%';

                //通过设置进度条的宽度达到效果
                // $('.progress > div').css('width', progressRate);
            })
            return xhr;
        }
    });
}
</script>
@endsection